<template>
   <div>
       <div class="container" style="width: 95%">
<!--           <h2>用户信息表</h2>-->
           <div>
<!--               <el-button type="success" class="btn-base" @click="dialogFormVisible=true" :disabled="true" icon="el-icon-document-add">添加新用户</el-button>-->
<!--               <el-button type="danger" class="btn-base" :disabled="!IsDelete" @click="deleteAll" icon="el-icon-delete-solid">批量删除</el-button>-->
           </div>
           <el-table

                   :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
                   tooltip-effect="light"
                   style="width: 100%"

                    >
<!--               <el-table-column-->
<!--                       type="selection"-->
<!--                       width="55">-->
<!--               </el-table-column>-->
               <el-table-column
                       label="类别"
                       prop="markInfo"
                       width="100"
                       :filters="[{text: '员工', value: '员工'}, {text: '客户', value: '客户'}, {text: '管理员', value: '管理员'}]"
                       :filter-method="filterHandler">
                   <template slot-scope="scope">{{ scope.row.markInfo }}</template>
               </el-table-column>
               <el-table-column
                       prop="userName"
                       label="姓名"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="tel"
                       label="联系电话"
                       width="150">
               </el-table-column>
               <el-table-column
                       prop="genderInfo"
                       label="性别"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="serve"
                       label="职位"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="mail"
                       label="邮箱"
                       width="160">
               </el-table-column>
               <el-table-column
                       prop="identityCardNumber"
                       label="身份证号"
                       width="160">
               </el-table-column>
               <el-table-column label="操作" width="300">
                   <template slot="header" slot-scope="scope">
                       <el-input
                               v-model="search"
                               size="mini"
                               placeholder="输入关键字搜索"/>
                   </template>
                   <template slot-scope="scope">
                       <el-button
                               type="success"
                               size="mini"
                               @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
                       <el-button
                               type="primary"
                               size="mini"
                               @click="view(scope.$index, scope.row)" icon="el-icon-view" >详细信息</el-button>
                       <el-button
                               size="mini"
                               type="danger"
                               @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                   </template>
               </el-table-column>
           </el-table>
       </div>

        <!--       //编辑用户弹窗-->
       <el-dialog :title="`${viewVisiable===false?'编辑':'查看'}用户信息`" :visible.sync="dialogFormVisible" >
           <el-form :model="form" :rules="rules">
               <table>

                   <tr>
                       <td>
                           <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
                               <el-input v-model="form.userName" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>
                       </td>
                       <td>
                           <el-form-item label="性别" :label-width="formLabelWidth" prop="genderInfo">
<!--                               <el-input v-model="form.genderInfo" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>-->
                               <el-select v-model="form.genderInfo" placeholder="请选择"  :disabled="viewVisiable">
                                   <el-option
                                           v-for="item in options"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                   </el-option>
                               </el-select>
                           </el-form-item>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <el-form-item label="身份证号" :label-width="formLabelWidth" prop="identityCardNumber">
                               <el-input v-model="form.identityCardNumber" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>

                       </td>
                       <td>
                           <el-form-item label="联系电话" :label-width="formLabelWidth" prop="tel">
                               <el-input v-model="form.tel" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>

                       </td>
                   </tr>
                   <tr>
                       <td>
                           <el-form-item label="房间号" :label-width="formLabelWidth">
                               <el-input v-model="form.roomId" autocomplete="off" width="60%" disabled="disabled"></el-input>
                           </el-form-item>

                       </td>
                       <td>
                           <el-form-item label="房间状态" :label-width="formLabelWidth">
                               <el-input v-model="form.roomStatus" autocomplete="off" width="60%" disabled="disabled"></el-input>
                           </el-form-item>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <el-form-item label="昵称" :label-width="formLabelWidth">
                               <el-input v-model="form.nickName" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>
                       </td>
                       <td>
                           <el-form-item label="密码" :label-width="formLabelWidth">
                               <el-input type="password" v-model="form.password" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <el-form-item label="工号" :label-width="formLabelWidth" prop="jobNumber">
                               <el-input v-model="form.jobNumber" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>
                       </td>
                       <td>
                           <el-form-item label="邮箱" :label-width="formLabelWidth" prop="mail">
                               <el-input v-model="form.mail" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <el-form-item label="任职" :label-width="formLabelWidth" prop="serve">
<!--                               <el-input v-model="form.serve" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>-->
                               <el-select v-model="form.serve" placeholder="请选择"  :disabled="viewVisiable">
                                   <el-option
                                           v-for="item in options2"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                   </el-option>
                               </el-select>
                           </el-form-item>
                       </td>
                       <td>
                           <el-form-item label="账户" :label-width="formLabelWidth" prop="userAccount">
                               <el-input v-model="form.userAccount" autocomplete="off" width="60%" :disabled="viewVisiable"></el-input>
                           </el-form-item>
                       </td>
                   </tr>
               </table>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="saveInfo">确 定</el-button>
           </div>
       </el-dialog>
   </div>

</template>

<script>
    import {
        requestDeleteUserById, requestGetAllPostInfo,
        requestGetAllUserInfo, requestGetAllUserInfoByMark,
        requestGetOrderById, requestUpdateOrder,
        requestUpdateRoomStatusById, requestUpdateUserInfo
    } from '../../../../api';

    export default {
        name: 'UserInfo',
        data() {
            return {
                options2:[],
                options:[{
                    value: '男',
                    label: '男'
                },{
                    value: '女',
                    label: '女'
                }],
                search:'',
                formLabelWidth: '120px',
                form:{
                    identityCardNumber:'',
                    tel:'',
                    mail:'',
                    userAccount:'',
                    jobNumber:'',
                },
                rules:{
                    tel:[
                        { min: 11, max: 11, message: '输入11位电话号码', trigger: 'blur' },
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                            message: '手机号无效',
                            trigger: 'blur'
                        }
                    ],
                    identityCardNumber:[
                        { required: true, message: '请填写证件号码', trigger: 'blur' },
                        {
                            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                            message: '证件号码格式有误！',
                            trigger: 'blur'
                        }
                    ],
                    mail:[ { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                    ],
                    userAccount:[
                        { required: true, message: '请输入银行卡号', trigger: 'blur' },
                        { pattern:/^(998801|998802|622525|622526|435744|435745|483536|528020|526855|622156|622155|356869|531659|622157|627066|627067|627068|627069)\d{10}$/, message: '请输入正确的银行卡号', trigger: 'blur' }
                    ],
                    jobNumber:[{ required: true, message: '请输入银行卡号', trigger: 'blur' },
                              { type:"number", message: '银行卡号是数字', trigger: 'blur' }
                    ]
                },
                dialogFormVisible:false,
                tableData: [],
                multipleSelection: [],
                // currentUserId:'',
                viewVisiable:false,
            }
        },
        created(){
            this.getAllUserInfo()
            // this.getAllUserInfoByMark()
            this.getAllPostInfo()
        },
        computed:{
            IsDelete(){
                return this.multipleSelection.length>=2
            }
        },
        methods:{
            //获取职位信息
            async getAllPostInfo(){
                this.options2=[]
              const res = await requestGetAllPostInfo().catch(()=>"error")
                if("error"!==res){
                    for(let i=0;i<res.length;i++){
                        let tmp={
                            label:res[i].postType,
                            value:res[i].postType
                        }
                        this.options2.push(tmp)
                    }
                }
            },
            //查看详细信息
            view(index,row){
                this.viewVisiable=true
                this.dialogFormVisible=true
                this.form=this.tableData[index]
            },
            //查询所有用户信息
            async getAllUserInfo(){
                const res = await requestGetAllUserInfo().catch(()=>"error")
                if("error"!==res){
                    console.log(res)
                    for(let i=0;i<res.length;i++){
                        res[i].genderInfo=res[i].sex==='1'?'男':'女'
                        res[i].markInfo=res[i].mark===2?'员工':(res[i].mark===1?'管理员':'客户')
                    }
                    this.tableData=res
                }
            },
            //过滤函数
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            //批量删除
            async deleteAll(){
                console.log(this.multipleSelection)
                for(let i=0;i<this.multipleSelection.length;i++){
                    let json={id:this.multipleSelection[i].id}
                    //修改房间状态
                    let json1={roomId:this.multipleSelection[i].roomId,
                        roomStatus:2}
                    const res=await requestDeleteUserById(json).catch(()=>"error")
                    const res1=await requestUpdateRoomStatusById(json1).catch(()=>"error")
                    if('error'===res||'error'===res1){
                        this.$message({
                            message: '用户信息删除失败',
                            type: 'error'
                        });
                        return
                    }
                }
                this.$message({
                    message: '用户信息删除成功',
                    type: 'success'
                });
                this.getAllUserInfoByMark()
            },

            //保存更新信息
            async saveInfo(){
                this.dialogFormVisible = false
                let json1={
                    id:this.form.id,
                    userName:this.form.userName,
                    tel:this.form.tel,
                    identityCardNumber: this.form.identityCardNumber,
                    password:this.form.password,
                    serve:this.form.serve,
                    jobNumber:this.form.jobNumber,
                    mail:this.form.mail,
                    nickName: this.form.nickName,
                    sex:this.form.genderInfo==="男"?1:0,
                    userAccount:this.form.userAccount
                }
                console.log(json1)
                let json2={
                    roomId:this.form.roomId,
                    roomStatus:this.form.roomStatus
                }
                let json3={
                    time:this.form.time,
                    id:this.form.id,
                    roomId:this.form.roomId,
                    roomStatus:this.form.roomStatus,
                    userName:this.form.userName,
                }
                //更新用户信息
                let res2,res3
                const res1 = await requestUpdateUserInfo(json1).catch(()=>"error")
                //更新房间状态
                if(json2.roomId!=null){
                    // res2 =await requestUpdateRoomStatusById(json2).catch(()=>'error')
                }

                //更新订单信息
                if(json3.roomId!=null){
                    res3 =await requestUpdateOrder(json3).catch(()=>"error")
                }

                if('error'!==res1&&'error'!==res2&&'error'!==res3){
                    this.$message({
                        message: '用户信息更新成功',
                        type: 'success'
                    });
                    this.getAllUserInfo()
                }else{
                    this.$message({
                        message: '用户信息更新失败',
                        type: 'error'
                    });
                }
                this.form={}
            },
            //编辑用户信息
             handleEdit(index,row){
                console.log(this.tableData[index])
                this.form=this.tableData[index]
                 this.viewVisiable=false
                this.dialogFormVisible=true
            },
            async getAllUserInfoByMark(){
                this.tableData=[]
                let json={mark:3}//获取用户信息
                const res= await requestGetAllUserInfoByMark(json).catch(()=>'error')
                if('error'!==res){
                    console.log(res)
                    for(let i=0;i<res.length;i++){
                        let tmp={
                            id:res[i].id,
                            userName:res[i].userName,
                            tel:res[i].tel,
                            identityCardNumber:res[i].identityCardNumber,
                            roomId:'',
                            roomStatus:'',
                            date:'',
                        }
                        let json1={id:res[i].id}
                        const res1=await requestGetOrderById(json1).catch(()=>"error")
                        if("error"!==res1){
                            console.log(res1)
                            tmp.date=res1.time
                            tmp.roomId=res1.roomId
                            tmp.roomStatus=res1.roomStatus
                            console.log(tmp)
                        }
                        this.tableData.push(tmp)
                    }
                }
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            async handleDelete(index,row){
                console.log(this.tableData[index])
                //删除用户记录
                let json={id:this.tableData[index].id}
                //修改房间状态
                let res1
                let json1={roomId:this.tableData[index].roomId,
                            roomStatus:2}
                const res=await requestDeleteUserById(json).catch(()=>"error")
                if(this.tableData[index].mark===3){
                     res1=await requestUpdateRoomStatusById(json1).catch(()=>"error")
                }
                if('error'!==res&&'error'!==res1){
                    this.$message({
                        message: '用户信息删除成功',
                        type: 'success'
                    });
                    this.getAllUserInfo()
                }else{
                    this.$message({
                        message: '用户信息删除失败',
                        type: 'error'
                    });
                }
            }
        }
    };

</script>

<style scoped>
.btn-base{
    margin-bottom: 10px;
}
</style>